{% extends "base.html" %}

{% load static %}
{% load component_tags %}

{% comment %} Meta tags {% endcomment %}
{% block meta_tags %}
<link rel="stylesheet" href="{% static 'css/login.css' %}">
<script src="{% static 'js/words.js' %}"></script>
{% endblock %}


{% block content %}
<main style="z-index: 10" class="form-signin text-center">
    <form action="{% url 'login' %}" method="POST">
        {% csrf_token %}
        <div class="p-3 text-center">
            {% component "Logo" %}
        </div>

        {% if user.is_authenticated %}
        <p class="fs-5 mb-2 text-body-secondary" style="color:var(--slate-400)">You are already login as:</p>
        <h1 class="h1 mb-4 fw-bold fst-italic">{{user.username}}</h1>
        <a href="{% url 'logout' %}" class="w-100 btn btn-lg btn-dark mt-2 rounded-pill border-slate-700 bg-slate-800" type="button">Logout</a>

        {% else %}

        <h4 class="h4 mb-3 fw-normal" style="color:var(--slate-400)">Please sign in</h4>
        <div class="form-floating mb-3">
            <input  type="text" class="fst-italic form-control" id="floatingInput" autocomplete="username" name="username"
                value="{% if username %}{{username}}{% endif %}"  placeholder="Username"  required>
            <label for="floatingInput">Username</label>
        </div>
        <div class="form-floating mb-3">
            <input type="password"   placeholder="Password" class="form-control" name="password" autocomplete="current-password"
                id="floatingPassword" required>
            <label for="floatingPassword">Password</label>
        </div>

        <div class="form-check mb-3">
            <label class="form-check-label" title="Keep your account login, until you logout on this computer">
                <input type="checkbox" value="1" class="form-check-input" name="remember_me" {% if remember_me %}checked{% endif %}
                    autocomplete="off" /> Remember me
            </label>
        </div>
        <button class="w-100 btn btn-lg btn-dark rounded-pill border-slate-700 bg-slate-800" type="submit">Sign in</button>

        {% endif %}
    </form>
</main>

{% endblock %}